<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Калькулятор калорий</title>
    <link rel="shortcut icon" href="./src/assets/img/logo.svg" type="image/svg">
    <link rel="stylesheet" href="./src/assets/styles/layout.css">
</head>
<body>
<div class="calculator">
    <section class="productList-panel">
        <button id="openModalBtn" class="glow-on-hover">Добавить продукт</button>
        <button class="glow-on-hover productList-show">Скрыть список продуктов</button>
        <button id="setGoalsBtn" class="glow-on-hover">Установить цель</button>
    </section>

    <div id="modal" class="modal">
        <div class="modal-container">
            <div class="modal-header">
                <span class="close" id="closeModalBtn">&times;</span>
            </div>
            <div class="modal-content">
                <h2>Добавить продукт</h2>

                <form id="productForm">
                    <div class="productForm-wrapper">
                        <label for="productName">Название продукта:</label>
                        <input type="text" id="productName" required>
                    </div>
                    <div class="productForm-wrapper">
                        <label for="calories">Калорийность (ккал):</label>
                        <input type="number" id="calories" required>
                    </div>
                    <div class="productForm-wrapper">
                        <label for="description">Описание:</label>
                        <textarea id="description"></textarea>
                    </div>
                    <button class="glow-on-hover" type="submit">Добавить</button>
                </form>
            </div>
        </div>
    </div>

    <div id="goalsModal" class="modal">
        <div class="modal-container">
            <div class="modal-header">
                <span class="close" id="closeGoalsModalBtn">&times;</span>
            </div>
            <div class="modal-content">
                <h2>Установить цель на сегодня</h2>
                <div class="goalsForm-wrapper">
                    <label for="caloriesGoal">Целевая калорийность (ккал):</label>
                    <input type="number" id="caloriesGoal" required>
                </div>
                <button id="saveGoalsBtn" class="glow-on-hover" type="button">Сохранить</button>
            </div>
        </div>
    </div>

    <section class="productList">
        <div class="productList-filter">
            <input type="text" class="productList-filterInput" placeholder="Фильтр по названию">
            <button class="glow-on-hover productList-sort">Сортировать по калориям</button>
        </div>
        <div id="productList" class="productList-container"></div>
    </section>

    <section class="selectedProducts">
        <h2>Съеденные продукты</h2>
        <ul class="selected-products-container"></ul>
        <h4 id="totalCalories">Сумма калорий: 0 ккал</h4>
    </section>

    <section class="calories">
        <div class="calories-panel">
            <span class="calories-goalDisplay"></span>
            <canvas id="chartCanvas" height="100"></canvas>
        </div>
    </section>

    <section class="calculator-panel">
        <button id="clearAllDataBtn" class="glow-on-hover">Очистить все данные</button>
    </section>
</div>
<script src="./src/scripts/app.js" type="module"></script>
</body>
</html>
